import '../styles/calendar.less';
import { getDaysOfMonth, getToday, getClasses } from './utils';
import { useMemo, useState, useEffect, ReactNode } from 'react';
import { history } from 'umi';
import dayjs from 'dayjs';
import { Popover } from 'antd';

import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');

/**
 * 简单日历组件
 */
function SimpleCalendar() {
  // 设置当前月份
  const [month, setMonth] = useState(dayjs());
  // 获取今天的日期
  const { year, monthIdx, oneday } = getToday();

  // 获取当前月所有日期
  const days = useMemo(() => {
    return getDaysOfMonth(month.year(), month.month() + 1);
  }, [month]);

  // 获取周标题
  const weekTitles = useMemo(() => {
    return [...Array(7)].map((_, weekInx) => {
      return dayjs().day(weekInx);
    });
  }, []);

  // 切换月份
  const onMonthSwitch = (action: number) => {
    setMonth((month) => {
      return month.add(action, 'month');
    });
  };
  // 点击日期跳转到排班页面
  const turnPage = (day: any) => {
    history.push('/home/Detail');
  };
  const popoverContent = (day: any) => {
    return (
      //三元运算判断day中是否存在classesName
      day.job ? (
        <div>
          <p>
            {day.job.classesName}:{day.job.startTime}-{day.job.endTime}
          </p>
        </div>
      ) : (
        <div>
          <p>暂无排班</p>
        </div>
      )
    );
  };
  //获取班表信息
  const [id] = useState(localStorage.getItem('userId') || '');
  const [classes, setClasses] = useState<
    {
      [x: string]: ReactNode;
      job: any;
    }[]
  >([]);
  const getData = async () => {
    const data = await getClasses(id);
    console.log('======= datajob =======\n', data);

    const newDays = days.map((day) => {
      const matchedJob = data.find(
        (item: any) =>
          item.year === day.year() &&
          item.month === day.month() + 1 &&
          item.day === day.date(),
      );
      const newDay = { ...day, job: matchedJob };
      if (matchedJob) {
        newDay.job = matchedJob;
      }
      return newDay;
    });
    setClasses(newDays);
  };

  useEffect(() => {
    getData();
  }, [days]);
  return (
    <div className="App">
      <div className="calendar">
        <div className="calendar-month">
          <div
            className="calendar-month-switch"
            onClick={() => onMonthSwitch(-1)}
          >
            {'<'}
          </div>
          <div>{month.format('MMM YYYY')}</div>
          <div
            className="calendar-month-switch"
            onClick={() => onMonthSwitch(1)}
          >
            {'>'}
          </div>
        </div>
        <div className="calendar-title">
          {weekTitles.map((title) => {
            return <div className="calendar-week">{title.format('dd')}</div>;
          })}
        </div>
        <div className="calendar-content">
          {classes.map((day, index) => {
            return (
              <Popover title="当日排班" content={popoverContent(day)}>
                <div
                  className={day.job ? 'active-day' : 'calendar-day'}
                  key={index}
                  onClick={() => {
                    turnPage(day);
                  }}
                >
                  {day.$D}
                </div>
              </Popover>
            );
          })}
        </div>
      </div>
    </div>
  );
}

export default SimpleCalendar;
